// hooks提供可复用逻辑的函数（钩子）

import { ref } from 'vue'
import { useIntersectionObserver } from '@vueuse/core'
import { MyAxiosPromise } from '@/types/axiosTypes'

// 数据懒加载函数
// 二次封装vue/use库中的进入可视区钩子实现
export const useLazyData = (apiFn: () => MyAxiosPromise) => {
    const target = ref()
    const result = ref()
    const { stop } = useIntersectionObserver(
        // 监听的目标元素
        target,
        ([{ isIntersecting }], observerElement) => {
            // isIntersecting 是否进入可视区域
            if(isIntersecting) {
                stop()
                // 调用API函数获取数据
                apiFn().then(data => {
                    result.value = data.result
                })
            }
        },
        // 配置选项
        {
            // 盒子进入可视区比例触发
            threshold: 0
        }
    )
    return {target, result}
}